@charset "utf-8";
/* CSS Document */


    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --primary:   #024295;
      --primary-d: #c25c03;
      --dark:      #1f3448;
      --dark2:     #d1d5de;
      --bg:        #f4f6f8;
      --card:      #cbdcfc;
      --text:      #080227;
      --muted:     #030910;
      --radius:    10px;width="360" height="203"
      --shadow:    0 4px 20px rgba(0,0,0,.08);
      --transition: 0.22s ease;
    }

    html { scroll-behavior: smooth; }

    body {
      margin: 0px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: rgba(246,249,255,1.00);
      font-size: 26;
      
      line-height: 1.7;
    }

    /* ── SKIP LINK (akadálymentesség) ── */
    .skip-link {
      position: absolute; top: -40px; left: 0;
      background: var(--primary); color: #fff;
      padding: 8px 16px; border-radius: 0 0 8px 0;
      font-weight: 700; z-index: 9999;
      transition: top .2s;
    }
    .skip-link:focus { top: 0; }

    /* ── HEADER ── */
    header {
    background: linear-gradient(to top, transparent 20%, rgb(5, 6, 60) 100%); 
    color: #2f0879;
    padding: 0;
    }
    .header-inner {
      max-width: 96%;
      margin: 0 auto;
      padding: 28px 24px 20px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 45px;
      justify-content: space-between;
    }
    .company-name {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: .03em;
    color: rgb(54, 0, 202);
    }
    .company-name span { color: #6e6a7c; }
    .tagline {
    flex: 1 1 200px;
    font-size: 1.25rem;
    opacity: .95;
    max-width: 520px; color:rgb(22, 22, 134);
    font-weight: bolder;
    line-height: 1;
    text-align: center;
   
    }
    .contact-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
    }
    .contact-bar a {
      color: #000533;
      text-decoration: none;
      background-color: #ffffff;
      border: 2px solid #000533;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: .88rem;
      font-weight: 600;
      transition: background var(--transition);
      display: flex; align-items: center; gap: 6px;
    }
    .contact-bar a:hover { background: var(--primary); border-color: var(--primary); color: rgb(206, 205, 205); }

    /* ── HERO ── */
    .hero {
      display: flex;
      flex-direction: row ;
      /*flex-wrap: wrap;*/
      justify-content: center;
     height: auto;
      overflow: hidden;
    }  
    .hero-text {
      padding-left: 50px;
      padding-right: 10%;
      padding-top: 30px;
      padding-bottom: 30px;
      width: 60%;
      height: auto;
      text-align: left;
      position: relative; z-index: 1;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      background:  linear-gradient(0deg,  rgb(42, 42, 34) -50%, transparent 50%, white 90%), url("pic26/cement-texture_1194-6042.png") center/cover no-repeat;
    }
    .hero-pic {
      width: 40%;
      height: auto;
      /*position: absolute; inset: 0;*/
      background-color: grey;
      background-image: url("pic26/textures/csiszoltbetonpadlo-14.jpg");
      background-position: right;
      background-size: cover;
      opacity: .8;
      z-index: 0;
    }
  
    

    .hero h1 {
      font-weight: 600;
      line-height: 1.3;
      max-width: 1210px;
      margin: 0 auto 20px;
    }
    .hero h1 { color: #0c02a1; font-style: Snormal; font-size: clamp(1.0rem, 3vw, 2.0rem) }

    .hero h1 em { color: rgb(17, 47, 181); font-style: Snormal;  font-size: clamp(1.2rem, 3vw, 2.3rem); }
    .hero p {
      max-width: 800px;
      margin: 10px;
      /*opacity: .88;*/
      font-size: clamp(0.9rem, 2vw, 1.3rem);
      color: rgb(3, 3, 3);
      font-weight: 600;
      
    }
    .hero-badges {
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    }
    .hero-badges span {
      background: rgb(220, 220, 243);
      border: 2px solid rgb(59, 62, 142);
      border-radius: 999px;
      padding: 5px 16px;
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: rgb(6, 3, 16);

    }

    /* ── NAV ── */
    nav {
      background: rgb(12, 1, 111);
      position: sticky; top: 0; z-index: 100;
      box-shadow: 0 2px 10px rgba(110, 109, 129, 0.745);
      
    }
    .nav-inner {
      max-width: 1400px;
      margin:0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    nav a {
      color: #fff;
      text-decoration: none;
      padding: 14px 22px;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: .02em;
      transition: background var(--transition);
      display: block;
    }
    nav a:hover, nav a:focus { background: var(--primary-d); outline: none; }

    /* ── MAIN LAYOUT ── */
    main {
      max-width: 1600px;
      margin: 0 auto;
      padding: 48px 24px 80px;
    }

    /* ── INTRO ── */
    .intro-box {
      background: linear-gradient(160deg, rgb(208, 205, 192), rgb(251, 250, 249)) ;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 36px 40px;
      margin-bottom: 52px;
    }
    .intro-box h2 {
      font-size: 1.6rem;
      font-weight: 700;
      margin-bottom: 18px;
      color: #2b2307;
      line-height: 1.4;
    }
    .intro-box p { margin-bottom: 12px; font-size: 1.3rem; }
    .intro-box p:last-child { margin-bottom: 0; }
    .intro-box strong { color: var(--primary); }

    /* ── SECTION TITLE ── */
    .section-title {
      font-size: 1.3rem;
      font-weight: 800;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--dark);
    }
    .section-title::after {
      content: '';
      flex: 1;
      height: 2px;
      background: linear-gradient(90deg, var(--primary), transparent);
      border-radius: 2px;
    }

    /* ── SERVICE GRID ── */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
      gap: 34px;
      margin-bottom: 56px;
    }

    /* ── SERVICE CARD ── */
    .service-card {
      background: rgb(221, 220, 220);
      border-radius: var(--radius);
      box-shadow: 3px 12px 18px rgba(10, 10, 10, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition:transform var(--transition), box-shadow var(--transition);    }
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 36px rgba(0,0,0,.13);
    }
    .service-card .card-img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      background: #2c4b70;
      display: block;
    }
    /* Placeholder ha nincs kép */
    .card-img-placeholder {
      width: 100px;
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, #658ab8, #c8d0da);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
    }
    .card-body {
      padding: 22px 24px 26px;
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: #f3f8ff;
    }
    .card-icon {
      font-size: 1.6rem;
      margin-bottom: 8px;
    }
    .card-body h3 {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: rgb(1, 1, 114);
      line-height: 1.4;
    }
    .card-body p {
      font-size: 1.2rem;
      color: rgb(12, 12, 49);
      flex: 1;
    }
    .card-tag {
      display: inline-block;
      background: #fff4ca;
      color: black;
      border-radius: 999px;
      padding: 3px 12px;
      font-size: .95rem;
      font-weight: 600;
      margin-top: 14px;
      align-self: flex-start;
    }

    /* ── CTA ── */
    .cta-box {
      background: linear-gradient(135deg, var(--primary), var(--primary-d));
      border-radius: var(--radius);
      padding: 44px 40px;
      text-align: center;
      color: #fff;
      margin-bottom: 0;
    }
    .cta-box h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; }
    .cta-box p { opacity: .9; margin-bottom: 24px; font-size: 1rem; }
    .cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-block;
      padding: 12px 28px;
      border-radius: 999px;
      font-weight: 700;
      font-size: .95rem;
      text-decoration: none;
      transition: background var(--transition), color var(--transition);
      cursor: pointer;
    }
    .btn-white { background: #fff; color: var(--primary); }
    .btn-white:hover { background: #fef0e5; }
    .btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.6); }
    .btn-outline:hover { background: rgba(255,255,255,.15); }

    /* ── FOOTER ── */
    footer {
      background: var(--dark);
      color: rgba(255,255,255,.7);
      padding: 36px 24px;
      text-align: center;
      font-size: .85rem;
    }
    footer strong { color: var(--text); }
    footer a { color: rgba(255,255,255,.75); text-decoration: none; }
    footer a:hover { color: var(--primary); }
    footer .footer-inner { max-width: 700px; margin: 0 auto; }
    footer p + p { margin-top: 8px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 700px) {
      .intro-box { padding: 22px 18px; }
      .hero { padding: 44px 16px; }
      .cta-box { padding: 32px 20px; }
      .services-grid { grid-template-columns: 1fr; }
      .header-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    }